<div class="bu-is-flex bu-is-flex-wrap-wrap">
    <div v-for="(item, idx) in allApps" :key="item.id" class="clyd-legend-app bu-is-flex bu-mt-2 bu-is-flex-shrink-1" :style="appBlockStyles(allApps, idx)">
        <div class="bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-is-flex-grow-1">
            <div :style="item.image" class="clyd-legend-app__logo"></div>
            <span class="bu-ml-1 text-small has-ellipsis bu-is-flex-shrink-1">{{item.name}}</span>
        </div>

        <!-- Adding 26 at the end of the background color because it chagnes background opacity to 15% -->
        <div v-if="item.labels && item.labels.length" class="bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-is-flex-grow-1 bu-ml-2" style="min-width: 0">
            <div v-for="(label, i) in item.labels" :class="['bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-px-2', {'bu-mr-1': (i !== (item.labels.length - 1)) ? true: false}]" :style="{backgroundColor: label.color + '26', borderRadius: '4px', minWidth: 0}">
                <i class="fas fa-circle bu-mr-2" :style="{fontSize: '6px', color: label.color}"></i>
                <span class="text-small has-ellipsis bu-is-flex-shrink-1">{{label.label}}</span>
            </div>
        </div>
    </div>
</div>
